<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

    <title>ECharts</title>
    <!--  echarts.js -->

    <script src="./js/echarts.min.js"></script>
    <script
            src="http://code.jquery.com/jquery-1.12.4.js"
            integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="
            crossorigin="anonymous"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    var uploadedDataURL = "./js/data.json";

    myChart.showLoading();
    $.get(uploadedDataURL, function(chinaJson) {
        echarts.registerMap('北京', chinaJson);
        myChart.hideLoading();
        myChart.setOption({
            visualMap: {
                min: 10,
                max: 50,
                text: ['High', 'Low'],
                realtime: false,
                calculable: true,
                inRange: {
                    color: ['lightskyblue', 'yellow', 'orangered']
                }
            },
            series: [{
                type: 'map',
                map: '北京',
                selectedMode: 'single',
                roam:true,
                itemStyle: {
                    normal: {
                        label: {
                            show: true
                        }
                    },
                    emphasis: {
                        label: {
                            show: true
                        }
                    }
                },
                data: [{
                    name: '城六区',
                    value: 100
                }, {
                    name: '门头沟区',
                    value: 10
                }, {
                    name: '通州区',
                    value: 20
                }, {
                    name: '昌平区',
                    value: 30
                }, {
                    name: '大兴区',
                    value: 40
                }, {
                    name: '房山区',
                    value: 41
                }, {
                    name: '顺义区',
                    value: 15
                }, {
                    name: '平谷区',
                    value: 25
                }, {
                    name: '密云区',
                    value: 35
                }, {
                    name: '延庆区',
                    value: 35
                }, {
                    name: '怀柔区',
                    value: 45
                }


                ]
            }]
        });
    });




</script>
</body>
</html>